<template>
	<view class="technology-container" :style="containerStyle">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">技术栈</text>
				<text class="header-subtitle">探索不同技术领域的知识体系</text>
			</view>

			<!-- 显示模式切换按钮 -->
			<view class="display-mode-toggle" @click="toggleDisplayMode">
				<text class="toggle-icon" :class="{ 'grid-icon': !isListMode }">{{ isListMode ? '☰' : '▤' }}</text>
			</view>
		</view>

		<!-- 技术分类列表 -->
		<scroll-view class="tech-scroll" scroll-y enable-back-to-top show-scrollbar="false" refresher-enabled
			:refresher-triggered="refreshing" @refresherrefresh="handleRefresh" refresher-background="transparent">
			<!-- 列表视图 -->
			<view v-if="isListMode" class="tech-list">
				<view v-for="(tech, index) in techList" :key="tech.id" class="tech-card" :class="{
					'tech-card-empty': tech.cardCount === 0
				}" @click="handleTechClick(tech)">
					<!-- 卡片内容 -->
					<view class="tech-card-content">
						<!-- 顶部图标和名称 -->
						<view class="tech-card-header">
							<text class="tech-icon">{{ tech.icon }}</text>
							<view class="tech-info">
								<text class="tech-name">{{ tech.name }}</text>
								<text class="tech-level">难度：<text class="difficulty-stars">{{ getDifficultyStars(tech.level) }}</text></text>
							</view>
							<!-- 序号徽章 - 现在和info同一层，放在最右侧 -->
							<view class="tech-order-badge" :class="{
								'tech-special-badge-1': index === 0,
								'tech-special-badge-2': index === 1,
								'tech-special-badge-3': index === 2
							}">
								<text v-if="index < 3" class="tech-medal-icon">{{ index === 0 ? '🏆' : (index === 1 ? '🥈' :
									'🥉') }}</text>
								<text v-else class="tech-order-number">{{ tech.sortOrder }}</text>
							</view>
						</view>

						<!-- 描述 -->
						<text class="tech-description">{{ tech.description }}</text>

						<!-- 标签区域（固定高度，超出隐藏） -->
						<view class="tech-tags-wrapper">
							<view class="tech-tags">
								<view v-for="(tag, index) in tech.tagsArray" :key="index" class="tech-tag">
									<text class="tech-tag-text">{{ tag }}</text>
								</view>
							</view>
						</view>

						<!-- 底部卡片数量（固定在底部） -->
						<view class="tech-card-footer">
							<view class="tech-card-count-wrapper">
								<text class="tech-card-count-icon">📚</text>
								<text class="tech-card-count">
									{{ tech.cardCount + ' 张卡片' }}
								</text>
							</view>

							<view class="tech-start-button">
								<text class="tech-start-icon">▶</text>

							</view>

						</view>
					</view>

				</view>
			</view>

			<!-- 网格视图 -->
			<view v-if="!isListMode" class="tech-grid">
				<view v-for="(tech, index) in techList" :key="tech.id" class="grid-tech-card" :class="{
					'grid-tech-card-empty': tech.cardCount === 0
				}" @click="handleTechClick(tech)">
					<!-- 卡片内容 -->
					<view class="grid-card-content">
						<!-- 标题和序号放在同一行 -->
						<view class="grid-title-row">
							<text class="grid-tech-name">{{ tech.name }}</text>
							<!-- 序号徽章 - 与标题同一行 -->
							<view class="grid-order-badge" :class="{
								'grid-special-badge-1': index === 0,
								'grid-special-badge-2': index === 1,
								'grid-special-badge-3': index === 2
							}">
								<text v-if="index < 3" class="grid-medal-icon">{{ index === 0 ? '🏆' : (index === 1 ?
									'🥈' : '🥉') }}</text>
								<text v-else class="grid-order-number">{{ tech.sortOrder }}</text>
							</view>
						</view>

						<!-- 图标和等级信息在标题下方 -->
						<view class="grid-card-header">
							<text class="grid-tech-icon">{{ tech.icon }}</text>
							<text class="grid-tech-level">难度：<text class="grid-difficulty-stars">{{ getDifficultyStars(tech.level) }}</text></text>
						</view>

						<!-- 描述 -->
						<text class="grid-tech-description">{{ tech.description }}</text>

						<!-- 标签区域（固定高度，超出隐藏） -->
						<view class="grid-tech-tags-wrapper">
							<view class="grid-tech-tags">
								<view v-for="(tag, index) in tech.tagsArray" :key="index" class="grid-tag">
									<text class="grid-tag-text">{{ tag }}</text>
								</view>
							</view>
						</view>

						<!-- 底部卡片数量（固定在底部） -->
						<view class="grid-card-footer">
							<view class="grid-card-count-wrapper">
								<text class="grid-card-count-icon">📚</text>
								<text class="grid-card-count">
									{{ tech.cardCount + ' 张卡片' }}
								</text>
							</view>

							<view class="grid-start-button">
								<text class="grid-start-icon">▶</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- AI助手按钮 -->
		<AiChatButton buttonText="AI助手" />
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { getAllTechnologiesAPI } from '@/services/technologies';
	import { getThemeStyles } from '@/stores/theme';
	import { userInfo } from '@/stores/user';
	import { getDifficultyStars } from '@/utils/difficulty-stars';
	import AiChatButton from '@/components/AiChatButton.vue';
	import type { Technology } from '@/types';



	/**
	 * 技术栈列表
	 * 通过 getAllTechnologiesAPI() 获取，包含动态计算的卡片数量
	 */
	const techList = ref<Technology[]>([]);

	/**
	 * 下拉刷新状态
	 * 控制下拉刷新的显示状态
	 */
	const refreshing = ref(false);

	/**
	 * 显示模式状态
	 * true: 列表模式（单列）
	 * false: 网格模式（双列）
	 */
	const isListMode = ref(true);

	/**
	 * 切换显示模式
	 */
	const toggleDisplayMode = () => {
		isListMode.value = !isListMode.value;
	};

	// ============================================
	// 计算属性
	// ============================================

	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 * 用于适配刘海屏等特殊屏幕，确保内容不被遮挡
	 * 
	 * @returns {number} 安全距离（px）
	 */
	const safeDistance = computed(() => {
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20;
	});

	/**
	 * 获取主题样式
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 检查用户是否已登录
	 */
	const isLogin = computed(() => userInfo.value?.isLogin || false);

	/**
	 * 容器背景样式
	 */
	const containerStyle = computed(() => ({
		background: themeStyles.value.bgGradient
	}));

	// ============================================
	// 生命周期钩子
	// ============================================

	/**
	* 页面挂载时初始化和加载数据
	*/
	onMounted(async () => {
		//判断是否登录，没有登录，跳转登录页面
		if (!isLogin.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			});
			return;
		}
		await loadTechnologies();
	});


	/**
	 * 加载技术栈列表
	 * 从后端获取所有技术栈数据，包含动态计算的卡片数量
	 * 
	 * @param {boolean} showLoading - 是否显示加载提示，默认false
	 */
	const loadTechnologies = async (showLoading : boolean = false) => {
		try {
			if (showLoading) {
				uni.showLoading({ title: '加载中...', mask: false });
			}
			const res = await getAllTechnologiesAPI();
			const technologies = res.data || [];

			technologies.forEach((tech) => {
				tech.tagsArray = tech.tags.split(',');
			});
			techList.value = technologies;
			if (showLoading) {
				uni.hideLoading();
			}
		} catch (error) {
			console.error('[Technology Page] 加载技术栈失败:', error);
			techList.value = [];
			if (showLoading) {
				uni.hideLoading();
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none',
					duration: 2000
				});
			}
		}
	};

	// ============================================
	// 事件处理方法
	// ============================================

	/**
	 * 处理下拉刷新
	 * 当用户下拉时触发，重新加载技术栈列表数据
	 */
	const handleRefresh = async () => {
		refreshing.value = true;
		try {
			await loadTechnologies();
			// 延迟一下再关闭刷新状态，让用户看到刷新效果
			setTimeout(() => {
				refreshing.value = false;
			}, 300);
		} catch (error) {
			console.error('[Technology Page] 刷新失败:', error);
			refreshing.value = false;
			uni.showToast({
				title: '刷新失败，请重试',
				icon: 'none',
				duration: 2000
			});
		}
	};

	/**
	 * 点击技术卡片
	 * 处理技术栈卡片的点击事件，根据是否有数据决定跳转或提示
	 * 
	 * @param {Technology} tech - 被点击的技术栈对象
	 */
	const handleTechClick = (tech : Technology) => {
		uni.navigateTo({
			url: `/pages/technologies/knowledge/index?techCode=${tech.code}`
		});
	};
</script>

<style lang="scss" scoped>
  .technology-container {
    // ...
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: background-color 0.3s ease;
	}

	/**
 * 顶部标题栏
 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: v-bind('themeStyles.bgPrimary');
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: v-bind('themeStyles.cardBoxShadow');
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	/**
 * 显示模式切换按钮
 */
	.display-mode-toggle {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: v-bind('themeStyles.bgSecondary');
		border-radius: 16rpx;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: currentColor;
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		&:active {
			transform: scale(0.95);
			box-shadow: v-bind('themeStyles.cardActiveBoxShadow');

			&::before {
				opacity: 0.1;
			}
		}

		.toggle-icon {
			font-size: 44rpx;
			color: v-bind('themeStyles.textPrimary');
			transition: transform 0.3s ease, color 0.3s ease;
			position: relative;
			z-index: 1;

			/* 添加微小旋转效果增加交互感 */
			&.grid-icon {
				transform: rotate(5deg);
			}
		}
	}

	.header-content {
		flex: 1;
		padding-right: 20rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: v-bind('themeStyles.textPrimary');
		display: block;
		margin-bottom: 8rpx;
		/* 使用主题渐变 */
		background: v-bind('themeStyles.primaryGradient');
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: v-bind('themeStyles.textSecondary');
		font-weight: 500;
	}


	/**
	 * 技术列表滚动区域
	 */
	.tech-scroll {
		flex: 1;
		height: 0;
		padding: 0 24rpx;
		width: 100%;
		box-sizing: border-box;
	}

	/* 隐藏滚动条 */
	.tech-scroll ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		background: transparent;
	}

	.tech-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding-top: 24rpx;
	}

	/* 网格视图样式 */
	.tech-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 28rpx;
		padding-top: 24rpx;
		padding-bottom: 20rpx;
	}

	/**
	 * 技术卡片
	 */
	.tech-card {
		border-radius: 28rpx;
		overflow: hidden;
		position: relative;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		min-height: 480rpx;
		margin-left: auto;
		margin-right: auto;


		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		box-shadow: v-bind('themeStyles.cardBoxShadow');

		/* 列表视图下的卡片样式 - 显式设置宽度为100% */
		.tech-list & {
			width: 100%;
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			border-radius: 28rpx;
			opacity: 1;
			transition: opacity 0.3s ease;
		}

		&:active {
			transform: scale(0.98) translateY(-2rpx);
			box-shadow: v-bind('themeStyles.cardActiveBoxShadow');

			&::before {
				opacity: 0.8;
			}
		}
	}

	/**
 * 网格视图卡片样式
 */
	.grid-tech-card {
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		min-height: 460rpx;
		width: calc(50% - 20rpx) !important;
		margin: 0 !important;

		background: v-bind('themeStyles.bgCard');
		border: 1rpx solid v-bind('themeStyles.borderColor');
		box-shadow: v-bind('themeStyles.cardBoxShadowLight');

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			border-radius: 24rpx;
			opacity: 1;
			transition: opacity 0.3s ease;
		}

		&:active {
			transform: scale(0.98) translateY(-2rpx);
			box-shadow: v-bind('themeStyles.cardActiveBoxShadow');

			&::before {
				opacity: 0.8;
			}
		}
	}

	/**
 * 序号徽章
 */
	.order-badge {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background: v-bind('themeStyles.primaryGradient');
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		margin-left: auto;

		.order-number {
			font-size: 24rpx;
			font-weight: 700;
			color: #ffffff;
			line-height: 1;
		}
	}

	/**
 * 特殊徽章样式 - 前3个使用不同渐变颜色
 */
	// 通用奖牌图标样式
	.medal-icon {
		font-size: 32rpx;
		margin-right: 4rpx;
	}

	// 第1个徽章 - 金色
	.special-badge-1 {
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
		box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);

		.order-number {
			font-size: 26rpx;
			font-weight: 900;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}
	}

	// 第2个徽章 - 银色
	.special-badge-2 {
		background: linear-gradient(135deg, #e0e0e0 0%, #a9a9a9 100%);
		box-shadow: 0 4rpx 16rpx rgba(224, 224, 224, 0.4);

		.order-number {
			font-size: 25rpx;
			font-weight: 800;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}
	}

	// 第3个徽章 - 铜色
	.special-badge-3 {
		background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
		box-shadow: 0 4rpx 16rpx rgba(205, 127, 50, 0.4);

		.order-number {
			font-size: 25rpx;
			font-weight: 800;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}
	}

	.tech-card-empty {
		opacity: 0.65;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: v-bind('themeStyles.bgSecondary');
			opacity: 0.7;
			pointer-events: none;
			border-radius: 28rpx;
			z-index: 1;
		}
	}

	.grid-tech-card-empty {
		opacity: 0.65;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: v-bind('themeStyles.bgSecondary');
			opacity: 0.7;
			pointer-events: none;
			border-radius: 24rpx;
			z-index: 1;
		}
	}

	.tech-card-content {
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		position: relative;
		z-index: 2;
	}

	/* 网格视图卡片内容样式 */
	.grid-card-content {
		padding: 20rpx 20rpx 24rpx 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		position: relative;
		z-index: 2;
	}

	/**
 * 卡片头部
 */
	.tech-card-content .tech-card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
		flex-shrink: 0;
	}

	/* 标题行容器 - 包含标题和序号 */
	.grid-title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	/* 网格视图卡片头部 - 现在只包含图标和等级 */
	.grid-card-content .grid-card-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 16rpx;
		flex-shrink: 0;
	}

	.tech-card-content .tech-icon {
		width: 100rpx;
		height: 100rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		margin-right: 24rpx;
		font-size: 64rpx;
		line-height: 1;
	}

	/* 网格视图图标 */
	.grid-card-content .grid-tech-icon {
		width: 70rpx;
		height: 70rpx;
		background: v-bind('themeStyles.primaryGradient');
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		font-size: 42rpx;
		line-height: 1;
	}

	.tech-card-content .tech-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.grid-card-content .grid-tech-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.tech-card-content .tech-name {
		font-size: 36rpx;
		font-weight: 900;
		line-height: 1.2;
		letter-spacing: 1rpx;
		color: v-bind('themeStyles.textPrimary');
		text-shadow: v-bind('themeStyles.textShadow');
	}

	.grid-card-content .grid-tech-name {
		font-size: 34rpx;
		font-weight: 900;
		line-height: 1.3;
		letter-spacing: 0.5rpx;
		color: v-bind('themeStyles.textPrimary');
		text-shadow: v-bind('themeStyles.textShadow');
		flex: 1;
		margin-right: 12rpx;
		text-align: left;
	}

	.tech-card-content .tech-level {
		font-size: 24rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: v-bind('themeStyles.textShadowLight');
	}

	.grid-card-content .grid-tech-level {
		font-size: 22rpx;
		font-weight: 600;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: v-bind('themeStyles.textShadowLight');
		flex: 1;
		text-align: left;
	}

	/**
 * 描述
 */
	.tech-card-content .tech-description {
		font-size: 26rpx;
		line-height: 1.7;
		margin-bottom: 20rpx;
		display: block;
		flex: 1;
		min-height: 88rpx;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: v-bind('themeStyles.textShadowLight');
	}

	.grid-card-content .grid-tech-description {
		font-size: 24rpx;
		line-height: 1.6;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: v-bind('themeStyles.textShadowLight');
	}

	/**
 * 标签区域包装器（固定高度）
 */
	.tech-card-content .tech-tags-wrapper {
		flex-shrink: 0;
		overflow: hidden;
		margin-bottom: 16rpx;
		min-height: 48rpx;
		max-height: 120rpx;
	}

	.grid-card-content .grid-tech-tags-wrapper {
		flex-shrink: 0;
		overflow: hidden;
		min-height: 40rpx;
		max-height: 120rpx;
		margin-bottom: 16rpx;
	}

	/**
 * 标签
 */
	.tech-card-content .tech-tags {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
		align-content: flex-start;
		height: 100%;
		overflow: hidden;
	}

	.tech-card-content .tech-tag {
		padding: 8rpx 16rpx;
		backdrop-filter: blur(10rpx);
		border-radius: 12rpx;
		border: 1rpx solid;
		box-shadow: v-bind('themeStyles.cardBoxShadowLight');
		background: v-bind('themeStyles.bgTertiary');
		border-color: v-bind('themeStyles.borderColor');
	}

	.tech-card-content .tech-tag .tech-tag-text {
		font-size: 22rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: none;
	}

	.grid-card-content .grid-tech-tags {
		display: flex;
		gap: 6rpx;
		align-content: flex-start;
		height: 100%;
		overflow: hidden;
		flex-wrap: wrap;
	}

	.grid-card-content .grid-tech-tags .tag {
		padding: 8rpx 16rpx;
		backdrop-filter: blur(10rpx);
		border-radius: 12rpx;
		border: 1rpx solid;
		box-shadow: v-bind('themeStyles.cardBoxShadowLight');
		background: v-bind('themeStyles.bgTertiary');
		border-color: v-bind('themeStyles.borderColor');
	}

	.grid-card-content .grid-tech-tags .grid-tag {
		padding: 6rpx 12rpx;
		backdrop-filter: blur(10rpx);
		border-radius: 10rpx;
		border: 1rpx solid;
		box-shadow: v-bind('themeStyles.cardBoxShadowLight');
		background: v-bind('themeStyles.bgTertiary');
		border-color: v-bind('themeStyles.borderColor');
		flex-shrink: 1;
		max-width: calc(100% - 24rpx);
	}

	.grid-card-content .grid-tech-tags .grid-tag .tag-text {
		font-size: 22rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: none;
	}

	.grid-card-content .grid-tech-tags .grid-tag .grid-tag-text {
		font-size: 20rpx;
		font-weight: 700;
		color: v-bind('themeStyles.textSecondary');
		text-shadow: none;
		transform: scale(0.95);
		transform-origin: left center;
	}

	/**
 * 卡片底部（固定在底部）
 */
	.tech-card-content .tech-card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 2rpx solid v-bind('themeStyles.borderColor');
		margin-top: auto;
		flex-shrink: 0;
	}

	.grid-card-content .grid-card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 16rpx;
		border-top: 2rpx solid v-bind('themeStyles.borderColor');
		margin-top: auto;
		flex-shrink: 0;
	}



	/* Expanded card footer selectors */
	.tech-card-content .tech-card-count-wrapper {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.grid-card-content .grid-card-count-wrapper {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.tech-card-content .tech-card-count-icon {
		font-size: 32rpx;
		filter: v-bind('themeStyles.iconShadowLight');
	}

	.grid-card-content .grid-card-count-icon {
		font-size: 28rpx;
		filter: v-bind('themeStyles.iconShadowLight');
	}

	.tech-card-content .tech-card-count {
		font-size: 26rpx;
		font-weight: 800;
		color: v-bind('themeStyles.textPrimary');
		text-shadow: v-bind('themeStyles.textShadow');
	}

	.grid-card-content .grid-card-count {
		font-size: 24rpx;
		font-weight: 800;
		color: v-bind('themeStyles.textPrimary');
		text-shadow: v-bind('themeStyles.textShadow');
	}

	.tech-card-content .tech-start-button {
		width: 72rpx;
		height: 72rpx;
		background: v-bind('themeStyles.bgTertiary');
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.grid-card-content .grid-start-button {
		width: 64rpx;
		height: 64rpx;
		background: v-bind('themeStyles.bgTertiary');
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: v-bind('themeStyles.buttonBoxShadow');
		border: 1rpx solid v-bind('themeStyles.borderColor');
	}

	.tech-card-content .tech-start-icon {
		font-size: 36rpx;
		color: v-bind('themeStyles.primaryColor');
		line-height: 1;
		text-shadow: none;
	}

	/**
 * 列表视图序号徽章样式
 */
	.tech-card-content .tech-order-badge {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		background: v-bind('themeStyles.primaryGradient');
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}

	.tech-card-content .tech-order-badge .tech-order-number {
		font-size: 24rpx;
		font-weight: 700;
		color: #ffffff;
		line-height: 1;
	}

	.tech-card-content .tech-order-badge .tech-medal-icon {
		font-size: 32rpx;
		line-height: 1;
	}

	/* 列表视图特殊徽章样式 */
	.tech-card-content .tech-special-badge-1 {
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
		box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
	}

	.tech-card-content .tech-special-badge-2 {
		background: linear-gradient(135deg, #e0e0e0 0%, #a9a9a9 100%);
		box-shadow: 0 4rpx 16rpx rgba(224, 224, 224, 0.4);
	}

	.tech-card-content .tech-special-badge-3 {
		background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
		box-shadow: 0 4rpx 16rpx rgba(205, 127, 50, 0.4);
	}

	.grid-card-content .grid-start-icon {
		font-size: 32rpx;
		color: v-bind('themeStyles.primaryColor');
		line-height: 1;
		text-shadow: none;
	}

	/**
 * 网格视图序号徽章样式
 */
	.grid-card-content .grid-order-badge {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		background: v-bind('themeStyles.primaryGradient');
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		margin-left: auto;
	}

	.grid-card-content .grid-order-badge .grid-order-number {
		font-size: 22rpx;
		font-weight: 700;
		color: #ffffff;
		line-height: 1;
	}

	.grid-card-content .grid-order-badge .grid-medal-icon {
		font-size: 28rpx;
		line-height: 1;
	}

	/* 网格视图特殊徽章样式 */
	.grid-card-content .grid-special-badge-1 {
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
		box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
	}

	.grid-card-content .grid-special-badge-2 {
		background: linear-gradient(135deg, #e0e0e0 0%, #a9a9a9 100%);
		box-shadow: 0 4rpx 16rpx rgba(224, 224, 224, 0.4);
	}

	.grid-card-content .grid-special-badge-3 {
		background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
		box-shadow: 0 4rpx 16rpx rgba(205, 127, 50, 0.4);
	}

	/**
 * 列表视图星星样式
 */
	.difficulty-stars {
		color: #FFD700; 
		font-weight: bold;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	/**
 * 网格视图星星样式
 */
	.grid-difficulty-stars {
		color: #FFD700; 
		font-weight: bold;
		font-size: 20rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
	}

	/**
 * 底部占位
 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>